import React, { useEffect, useState } from 'react'
import { Layout, Menu, Button } from 'antd';
import Link from 'umi/link';
import {
    UserOutlined,
    VideoCameraOutlined,
    UploadOutlined,
    QuestionCircleOutlined
} from '@ant-design/icons';
import styles from './WorkLayout.css'
import { locationNum } from '../utils/constant'
// import  './WorkLayout.css'

const { Header, Sider, Content, Footer } = Layout;

function WorkLayout(props) {
    const [collapsed, setCollapsed] = useState();
    const [realName, setRealName] = useState('用户')
    console.log('用户真实姓名' + realName)
    const toggle = () => {
        setCollapsed(!collapsed)
    }
    useEffect(() => {
        setRealName(localStorage.getItem('realName'))
        console.log(localStorage.getItem('realName'))
    }, [localStorage.getItem('realName')])
    return (

        <Layout className={styles.work}>
            <Sider trigger={null} collapsible collapsed={collapsed}>
                <div className={styles.logo}>
                    <div className={styles.logo_img}><h4 className={styles.logo_text}>地质资料管理与分析系统</h4></div>
                </div>
                <Menu theme="dark" mode="inline" defaultSelectedKeys={[locationNum[props.location.pathname]]}>
                    {
                        localStorage.getItem('shale_sys_role') == 0 ? '' :
                            <Menu.Item key="1" icon={<UserOutlined />}>
                                <Link to="/work/member"></Link>
                                用户管理
                            </Menu.Item>
                    }

                    <Menu.Item key="2" icon={<VideoCameraOutlined />}>
                        <Link to="/work/sample"></Link>
                        样品管理
                    </Menu.Item>
                    <Menu.Item key="3" icon={<UploadOutlined />}>
                        <Link to="/work/echarts">报表管理</Link>
                    </Menu.Item>
                    <Menu.Item key="4" icon={<VideoCameraOutlined />}>
                        <Link to="/work/taskmanage">任务管理</Link>
                    </Menu.Item>
                    <Menu.Item key="5" icon={<QuestionCircleOutlined />}>
                        <Link to="/work/userUpdate">修改密码</Link>
                    </Menu.Item>
                    {/* <Menu.Item key="5" icon={<VideoCameraOutlined />}>
                        <Link to="/work">文件上传</Link>

                    </Menu.Item> */}
                    {/* <Menu.Item key="6" icon={<VideoCameraOutlined />}>
                        <Link to="/work">申请管理</Link>

                    </Menu.Item> */}
                </Menu>
            </Sider>
            <Layout className={styles.site_layout}>
                <Header className={styles.site_layout_background} style={{ padding: 0 }}>

                    <span style={{ float: 'right', marginRight: '2vw', fontSize: '2em' }}>
                        {realName}

                    </span>

                </Header>
                <Content
                    className={styles.site_layout_background}
                    style={{
                        margin: '24px 16px',
                        padding: 24,
                        minHeight: 280,
                        // maxHeight:320
                    }}
                >
                    {props.children}
                </Content>
                <Footer style={{ textAlign: 'center' }}>
                    <h4>copyright © 2021 中国石油西南油气田公司页岩气研究院</h4>
                </Footer>
            </Layout>
        </Layout >

    )
}

export default WorkLayout